import React from 'react';
import { Menu, Icon } from 'antd';

const { SubMenu } = Menu;

class MenuList extends React.Component {
    constructor(props){
        super(props)
        this.state = {
          
        }
    }
    selectTab(name,value){
        this.props.onTabSelect(name,value)
    }
    render() {
        return (
        <div>
            <Menu
                selectedKeys = {this.props.selectName}
                mode="inline"
                theme="dark"
            >
                {
                    this.props.data.map((item)=>(
                        (item.children ?
                            <SubMenu
                                key={item.name}
                                title={
                                    <span>
                                        <Icon type={item.type} />
                                        <span>{item.name}</span>
                                    </span>
                                }
                            >
                                {item.children.map((i)=>
                                    <Menu.Item key={i.name} onClick={this.selectTab.bind(this,i.name,i.path)}>
                                        <span>{i.name}</span>
                                    </Menu.Item>
                                )}
                            </SubMenu> :
                            <Menu.Item key={item.name} onClick={this.selectTab.bind(this,item.name,item.path)}>
                                <Icon type={item.type} />
                                <span>{item.name}</span>
                            </Menu.Item>)
                    ))
                }
            </Menu>
        </div>
        );
    }
    }

export { MenuList };